<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尛尛之家</title>
    <style>
        html,body{
            height: 100%;
        }
        /*下面为整体修改部分*/
        body {
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 0;
            background: white;
        }
        .top {
            display: flex;
            justify-content: center;
            width: 100%;
            height: 40px;
            font-size: 12px;
            color: #C4C4C4;
            background-color: #333333;
        }
        .top p {
            margin-right: 20%;
        }
        ul {
            display: flex;
        }
        ul li {
            list-style-type: none;
            border-right: 1px solid #C4C4C4;
        }
        ul li:last-child{
            border-right: none;
        }
        ul a{
            color:#c4c4c4;
            text-decoration: none;
            padding: 0 20px;
        }
        .footer {
            width: 100%;
            height: 40px;
            background-color: #333333;
            color: #C4C4C4;
            font-size: 12px;
            text-align: center;
            line-height: 40px;
            margin-top: 20px; 
        }
        .shop {           
            flex: auto;
            width: 930px;
            margin: auto;
        }
        .header {
            display:flex;
            justify-content: space-between;  
            width: 100%;
            margin-top: 25px;
        }
        .search form {
            display: flex;
            border: 1px solid #2F5DF2;
            border-radius: 26px;
            width: 400px;
            height: 26px;
        }

        /* 取消input的默认边框 */
        .header input {
            border: none;
            border-radius: 26px;
            font-size: 12px;
        }

        /* 设置输入框样式 */
        .header input[type="text"] {
            width: 80%;
            margin: 0 10px;
        }

        /* 设置按钮样式 */
        .header input[type="submit"] {
            /* 设置大小与颜色 */
            background-color: #2F5DF2;
            color: #FFFFFF;
            width: 20%;
        }
                /* 整体样式 */
        .banner {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        /* 横幅广告大小 */
        .ad {
            width: 80%;
            height: 311px;
        }

        /* 菜单样式 */
        .menu {
            width: 20%;
            height: 311px;
            background-color: #2F5DF2;
        }

        .menu p, .menu a {
            text-decoration: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 18px;
            padding: 4px 0;
        }

        .menu a:hover {
            color: yellow;
            cursor: pointer;
        }
         /* 商品区 */
         .goods_title {
            font-size: 25px;
            color: black;
        }

        .container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            
        }

        .item img {
            padding: 10px 0;
        }

        .name {
            color: #333333;
        }

        .info {
            color: #787878;
        }

        .price {
            color: #E92845;
            font-weight: 500;
        }

        .item {
            font-size: 13px;
            text-align: center;
            background-color: #FFFFFF;
            transition: all 0.3s;
            float:left;
            border: 20px solid white;
            
        }
        .item img {
            height: 175px; 
            width: 250px;
        }

        .item:hover {
            border-radius: 12px;
            cursor: pointer;
            box-shadow: 0 19px 39px 0 #999999;
            transform: translate(0, -4px);
        }
        .name {
            color: #333333;
        }

        .info {
            color: #787878;
        }

        .price {
            color: #E92845;
            font-weight: 500;
        }
        
       
        .price span {
            text-decoration: line-through;
            color: #787878;
            font-size: 12px;
            padding: 0 10px;
        }
        .logo {
            font-size: 30px;
            color: #2F5FF2
        }
    </style>
</head>
<body>
    <div class="top">
    <p>欢迎回来</p>
        <ul>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">我的相册</a></li>
            <li><a href="#">个人中心</a></li>
            <li><a href="#">疑问解答</a></li>
        </ul>
    </div>
    <div class="shop">
        <div class="shop">
            <div class="header">
                <div class="logo">
                    <p>尛尛之家</p>
                </div >
                <div class="search">
                    <form action="#">
                        <input type="text" placeholder="请输入搜索内容">
                        <input type="submit" value="搜一搜">
                    </form>
                </div>
            </div>
        </div>
        <div class="banner">
            <!-- 主部分分类 为尛尛之家添加一个超链接-->>
            <div class="menu">
                <p><a href="#">/尛尛之家/</a> 
                <p><a href="#">414宿舍   </a> / <a href="#">416宿舍  </a></p>
                <p><a href="#">417宿舍  </a> / <a href="#">418宿舍  </a></p>
                <p><a href="#">419宿舍  </a> / <a href="#">415宿舍  </a></p>
                
            </div>
            <!-- 广告 -->
            <div class="ad">
                <img src="https://gitee.com/tu-shanrong-rong/tupian/raw/master/img/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240320191554.jpg" height="311px" >
            </div>
        </div>
        <div class="goods">
            <p class="goods_title">生活记事</p>
            <div class="contaier">
                <div class="item">
                    <img src="D:\zaqizaba\tupian\微信图片_20240320193802.jpg" height="175px" width="150px">
                    <p class="name">小张</p>
                    <p class="info">宿舍四楼学习桌</p>
                    <p class="price">时间未知</p>
                    <p><a href="D:\zaqizaba\tupian\微信图片_20240320193802.jpg">点击放大</a></p>
                </div>
                <div class="item">
                    <img src="http://tu-shanrong-rong.gitee.io/material-images" height="175px" width="150px">
                    
                    <p class="name">小张</p>
                    <p class="info">宿舍新修的浴室</p>
                    <p class="price">时间未知</p>
                    <p><a href="http://tu-shanrong-rong.gitee.io/material-images">点击放大</a></p>
                </div>
                <div class="item">
                    <img src="D:\zaqizaba\tupian\微信图片_20240320194801.jpg">
                    <p class="name">小张</p>
                    <p class="info">小刘送的蛋糕</p>
                    <p class="price">时间未知</p>
                    <p><a href="D:\zaqizaba\tupian\微信图片_20240320194801.jpg">点击放大</a></p>
                </div>
                <div class="item">
                    <img src="http://nocturne.bczcdn.com/file/1654592764559_90265/Rectangle 14.png">
                    <p class="name">小张</p>
                    <p class="info">看不懂的课</p>
                    <p class="price">时间未知</p>
                    <p><a href="D:\zaqizaba\tupian\微信图片_20240320194801.jpg">点击放大</a></p>
                </div>
                <div class="item">
                    <img src="D:\zaqizaba\tupian\微信图片_20240320194810.jpg">
                    <p class="name">小王</p>
                    <p class="info">香迷糊了</p>
                    <p class="price">2024.3.20</p>
                    <p><a href="D:\zaqizaba\tupian\微信图片_20240320194810.jpg">点击放大</a></p>
                </div>
                <div class="item">
                    <img src="D:\zaqizaba\tupian\微信图片_20240320194817.jpg">
                    <p class="name">小张</p>
                    <p class="info">香到的花</p>
                    <p class="price">时间未知</p>
                    <p><a href="D:\zaqizaba\tupian\微信图片_20240320194817.jpg">点击放大</a></p>
                </div>
                <div class="item">
                    <img src="D:\zaqizaba\tupian\微信图片_20240320194814.jpg">
                    <p class="name">小张</p>
                    <p class="info">香到的花2.0</p>
                    <p class="price">时间未知</p>
                    <p><a href="D:\zaqizaba\tupian\微信图片_20240320194814.jpg">点击放大</a></p>
                </div>
                <div class="item">
                    <img src="D:\zaqizaba\tupian\微信图片_20240321193410.jpg">
                    <p class="name">小王</p>
                    <p class="info">暂无</p>
                    <p class="price">时间未知</p>
                    <p><a href="D:\zaqizaba\tupian\微信图片_20240321193410.jpg">点击放大</a></p>

                </div>
                <div class="item">
                    <img src="D:\zaqizaba\tupian\微信图片_20240320195924.jpg">
                    <p class="name">小张</p>
                    <p class="info">特别的食物</p>
                    <p class="price">时间未知</p>
                    <p><a href="D:\zaqizaba\tupian\微信图片_20240320195924.jpg">点击放大</a></p>
                </div>
                <div class="item">
                    <img src="D:\zaqizaba\tupian\微信图片_20240321193831.jpg">
                    <p class="name">小张</p>
                    <p class="info">游玩</p>
                    <p class="price">2024.3.20</p>
                    <p><a href="D:\zaqizaba\tupian\微信图片_20240321193831.jpg">点击放大</a></p>
                </div>
                <div class="item">
                    <img src="D:\zaqizaba\tupian\微信图片_20240321200237.jpg">
                    <p class="name">小张</p>
                    <p class="info">花3.0</p>
                    <p class="price">时间未知</p>
                    <p><a href="D:\zaqizaba\tupian\微信图片_20240321200237.jpg">点击放大</a></p>
                </div>
                <div class="item">
                    <img src="D:\zaqizaba\tupian\微信图片_20240321200358.jpg">
                    <p class="name">小王</p>
                    <p class="info">荷花</p>
                    <p class="price">时间未知</p>
                    <p><a href="D:\zaqizaba\tupian\微信图片_20240321200358.jpg">点击放大</a></p>
                </div>
            </div>
        </div>
    </div>
    <div calss="footer">Copyright@夜曲优选</div>
</body>
</html>